<template>
	<view class="uni-goods-nav">
		<view class="uni-tab_seat" />
		<view class="uni-tab_cart-box flex">
			<view class="flex uni-tab_cart-sub-box">
				<view v-for="(item,index) in options" :key="index" class="flex uni-tab_cart-button-left uni-tab_color-x">
					<view class="uni-tab_icon">
						<image class="image" :src="item.icon" mode=:widthFix />
					</view>
					<text class="uni-tab_text">{{item.text}}</text>
					<view class="flex uni-tab_dot-box">
						<text v-if="item.info" :class="{'uni-tab_dots':item.info>9}" class="uni-tab_dot-box"></text>
					</view>
				</view>
			</view>
			<view :class="{'uni-tab_right':fill}" class="flex uni-tab_cart-sub-box">
				<view v-for="(item,index) in buttonGroup" :key="index" :style="{backgroundColor:item.backgroundColor}"
				class="flex uni-tab_cart-button-right" @click="buttonClick(index,item)"><text class="uni-tab_cart-button-right"></text></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				options: [{
					icon: 'chat',
					text: '客服'
				}, {
					icon: 'shop',
					text: '店铺',
					info: 2,
					infoBackgroundColor: '#007aff',
					infoColor: "#f5f5f5"
				}, {
					icon: 'cart',
					text: '购物车',
					info: 2
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
						color: '#fff'
					}
				],
				customButtonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #1E83FF, #0053B8)',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #60F3FF, #088FEB)',
						color: '#fff'
					}
				],
				customButtonGroup1: [{
					text: '立即购买',
					backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
					color: '#fff'
				}]
			}
		},
		onLoad() {},
		methods: {
			onClick(e) {
				uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				})
			},
			buttonClick(e) {
				console.log(e)
				this.options[2].info++
			}
		}
	}
</script>

<style>
	.example-body {
		padding: 0;
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
	}

	.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}
</style>